<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/css/index.css" />
	</head>
	<body class="iot">
		<div class="header"></div>
		<div class="banner"><img src="/images/iot-banner.jpg" ></div>
		<div class="section hardware box">
			<div class="h1">
				<div class="english">
					Intelligent hardware
				</div>
				<div class="chinese">
					智<span>/</span>能<span>/</span>硬<span>/</span>件
				</div>
			</div>
			<p class="gary">
				硬件是我们实现某些功能的执行者或者说表现形式，在这个万物互联的时代，软硬件的结合少了哪一个都实现不了互联的效果，所以硬件的配合这时候就显得尤为重要。
			</p>
			<ul class="hide show1">
				<li>
					<div class="title">
						传感器设备
					</div>
					<a href="/html/iot-detail.html?type=1" class="more" target="_blank">
						查看详情
					</a>
					<div class="arrow">
						>>
					</div>
				</li>
				<li>
					<img src="/images/iot-hardware-1.jpg" >
				</li>
				<li>
					<div class="title">
						LoRa
					</div>
					<a href="/html/iot-detail.html?type=2" class="more" target="_blank">
						查看详情
					</a>
					<div class="arrow">
						>>
					</div>
				</li>
				<li>
					<img src="/images/iot-hardware-2.jpg" >
					<div class="tbBox">
						<div class="title">
							DTU
						</div>
						<a href="/html/iot-detail.html?type=3" class="more" target="_blank">
							查看详情
						</a>
					</div>
				</li>
				<li>
					<img src="/images/iot-hardware-3.jpg" >
				</li>
				<li>
					<div class="title">
						AR增强现实眼镜
					</div>
					<a href="/html/iot-detail.html?type=4" class="more" target="_blank">
						查看详情
					</a>
					<div class="arrow">
						<<
					</div>
				</li>
				<li>
					<img src="/images/iot-hardware-4.jpg" >
				</li>
			</ul>
		</div>
		<div class="section experience">
			<div class="h1 hide show2">
				<div class="english">
					Experience Center
				</div>
				<div class="chinese">
					体<span>/</span>验<span>/</span>中<span>/</span>心
				</div>
			</div>
			<div class="box">
				<ul>
					<li>
						<img src="/images/iot-experience-1.jpg" class="hide show3">
						<div class="tBox hide show4">
							<div class="title">
								智慧物联
							</div>
							<p class="gary">
								解决设备的远程连接、管理和监测的问题，可以在减少人力、物力的基础上提高管理效率
							</p>
						</div>
						<div class="btn hide show3">
							<a href="http://iot.king-break.com/" class="more" target="_blank">
								立即体验
							</a>
						</div>
					</li>
					<li>
						<img src="/images/iot-experience-2.jpg" class="hide show3">
						<div class="tBox hide show4">
							<div class="title">
								智慧运维
							</div>
							<p class="gary">
								设备进行保养、分类管理、保养计划、设备保养类型、当前保养状态及需要进行的保养等进行有效管理
							</p>
						</div>
						<div class="btn hide show3">
							<a href="http://iom.king-break.com/bim#/login" class="more" target="_blank">
								立即体验
							</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="section case box">
			<div class="h1 hide show5">
				<div class="english">
					classic case
				</div>
				<div class="chinese">
					典<span>/</span>型<span>/</span>案<span>/</span>例
				</div>
			</div>
			<ul class="hide show6">
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="hide show7">
				<div class="pre">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="pre" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						 viewBox="0 0 14 24" style="enable-background:new 0 0 14 24;" xml:space="preserve">
					<style type="text/css">
						.st0{fill:none;stroke:#2B2B2B;stroke-miterlimit:10;}
					</style>
					<polyline class="st0" points="11.1,4.9 4,12 11.1,19.1 "/>
					</svg>
				</div>
				<div class="next">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="next" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						 viewBox="0 0 14 24" style="enable-background:new 0 0 14 24;" xml:space="preserve">
					<style type="text/css">
						.st0{fill:none;stroke:#2B2B2B;stroke-miterlimit:10;}
					</style>
					<polyline class="st0" points="4,4.9 11.1,12 4,19.1 "/>
					</svg>
				</div>
				<div class="text">
					<div class="title">
						天瑞重机物联系统
					</div>
					<p class="gary">
						鲲博与天瑞重机的合作，物联系统的运用让其企业更好地管理场内的各种设备，对设备的地址、设备当前运行状态、设备的告警等情况进行统计与管理。
					</p>
				</div>
			</div>
		</div>
		<div class="footerBox">
			<iframe src="/html/footer.html" class="hide show8"></iframe>
		</div>
	</body>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		var nav = 3
	</script>
	<script src="/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script href="/plug-in/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/js/data.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(window).scroll(function(){
			isShow()
		});
		isShow()
		function isShow () {
			// 滚动条滚动
			var isTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;// (获取屏幕滚动高度)
			if (isTop > 380) {
				$('.show1').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 580) {
				$('.show2').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 900) {
				$('.show3').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 1100) {
				$('.show4').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 1200) {
				$('.show5').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 1480) {
				$('.show6').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 1650) {
				$('.show7').css({'top' : '0px', 'opacity' : '1'})
			}
			if (isTop > 1940) {
				$('.show8').css({'top' : '0px', 'opacity' : '1'})
			}
		}
		var index = 0, mycont = 0;
		// 经典案例 列表
		getList()
		checkPN()
		$('.pre').click(function(){
			if (index != 0) {
				index = index - 1
				mycont = index
				checkPN()
				getContent()
				$('.case ul li').eq(index).addClass('index').siblings().removeClass('index')
			}
		})
		$('.next').click(function(){
			if (index != (iot_case_data.length - 1)) {
				index = index + 1
				mycont = index
				checkPN()
				getContent()
				$('.case ul li').eq(index).addClass('index').siblings().removeClass('index')
			}
		})
		function getList () {
			var html = '';
			for (var i = index; i < (index + 3); i++) {
				if (i == index) {
					html += '<li class="index" id="' + i + '">';
				} else {
					html += '<li id="' + i + '">';
				}
				html += '<img src="' + iot_case_data[i].img + '">';
				html += '</li>';
			}
			mycont = index
			getContent()
			$('.case ul').html(html)
			$('.case ul li').click(function(){
				$(this).addClass('index').siblings().removeClass('index')
				index = mycont = parseInt($(this).attr('id'))
				checkPN()
				getContent()
			})
			$('.case ul li').mouseover(function(){
				$(this).addClass('index').siblings().removeClass('index')
				index = mycont = parseInt($(this).attr('id'))
				checkPN()
				getContent()
			})
		}
		function getContent () {
			var content = '';
			content += '<div class="title">' + iot_case_data[mycont].title + '</div>';
			content += '<p class="gary">' + iot_case_data[mycont].text + '</p>'
			$('.case .text').html(content)
		}
		function checkPN () {
			if (index == 0) {
				$('#pre .st0').css('stroke', '#afafaf')
			} else {
				$('#pre .st0').css('stroke', '#2b2b2b')
			}
			if (index != (iot_case_data.length - 1)) {
				$('.next .st0').css('stroke', '#2b2b2b')
			} else {
				$('.next .st0').css('stroke', '#afafaf')
			}
		}
	</script>
</html>
